<template>
	<view>

		<view class="order-item"v-for="(item, index) in orderList" :key="index">
			<view class="base-info">
				<text>{{item.updateDate}}</text>
				<text>订单号：{{item.orderId}}</text>
			</view>
			<course-item 
				v-for="(course, index2) in item.list" 
				:key="index2" :item="course"
			>
			</course-item>
			<view class="shifu">
				<text>实付：</text>
				<text>￥{{item.priceDiscount || item.pricePayable}}</text>
			</view>
			<view class="option center space-between">
				<!-- 订单状态：1待支付，2交易成功，3交易关闭 -->
				<text class="red" v-if="item.status === 1">待支付</text>
				<text class="grey" v-if="item.status === 3">交易关闭</text>
				<text class="grey" v-if="item.status === 2">交易成功</text> 
				<view>
					<!-- 
					 1待支付: 取消订单/立即支付
					 2交易成功: 不显任何按钮
					 3交易关闭:显示删除按钮
					 -->
					<button @click="orderCancel(item.orderId)" v-if="item.status === 1" type="default" size="mini">取消订单</button>
					<button @click="orderPay(item.orderId)" v-if="item.status === 1" type="warn" size="mini">立即支付</button>
					<button @click="orderDelete(item.orderId)" v-if="item.status === 3" size="mini">删除订单</button>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	let info = null;
	import {mapState} from 'vuex'
	import courseItem from '@/components/common/course-item.vue'
	import api from '@/api/order.js'
	export default {
		components:{
			courseItem
		},
		computed:{
			...mapState(['userInfo'])
		},
		data() {
			return {
				courseId:'',
				status:'',//取消支付跳转到我的订单页标识符
				orderList: [], // 订单列表数据
				groupId:'' ,//套餐id,
			}
		},
		async onLoad(option) {
			console.log(option);
			
			if(option.info!=null){
				info = JSON.parse(decodeURIComponent(option.info));
			}
			info = {
				userId:this.userInfo.uid
			}
			this.loadData(info)
			console.log('133',123);
			
		},
		
		methods: {
			async loadData(info) {
				// 查询用户订单列表
				const {data} = await api.getPayOrder(info)
				this.orderList = data
				console.log('this.orderList',this.orderList);
			},
			// 取消订单
			orderCancel(orderId) {
				uni.showModal({
					content: '确定取消该订单记录？',
					success: async (res) => {
						// 点击确定，进行调用接口取消订单
						if(res.confirm) {
							const res = await api.cancelOrder(orderId)
							if(res.code === 500) {
								this.$util.msg('取消订单成功')
								// 重新加载列表数据
								this.loadData(info)
							}else {
								this.$util.msg('取消订单失败')
							}
						}
					}
				})
			},
			//立即支付
			async orderPay(orderId){
			 let res = await api.PayOrder(orderId)
			 console.log(res);
			 if(res.code === 500){
				 uni.requestPayment({
				 	timeStamp: res.data.timeStamp,
				 	nonceStr: res.data.nonceStr,
				 	package: "prepay_id="+res.data.prepayId,
				 	signType: "RSA",
				 	paySign: res.data.paySign,
				 	success: (res) => {
				 		uni.showToast({
				 			title: '支付成功！'
				 		})
				 		this.loadData(info)
				 	},
				 	fail: (res) => {
				 		uni.showModal({
				 			content: '支付失败，原因：' + res.errMsg,
				 			showCancel: false,
				 		})
				 	},
				 	complete: () => {
				 		this.loading = false
				 	}
				 })
			 }
			},
			orderDelete(orderId){
				uni.showModal({
					content:'确定删除该订单吗？',
					success:async (res) => {
						// 点击确定，进行调用接口取消订单
						if(res.confirm) {
							const res = await api.getdeleteOrder(orderId)
							if(res.code === 200) {
								this.$util.msg('删除订单成功')
								// 重新加载列表数据
								this.loadData(info)
							}else {
								this.$util.msg('取消订单失败')
							}
						}
					}
				})
			}
		}
	}
</script>

<style lang="scss">
	
	.order-item {
		background-color: #FFFFFF;
		padding: 20rpx 30rpx;
		margin-bottom: 20rpx;
		font-size: 25rpx;
		border-bottom: $mxg-underline;
		.base-info {
			color: $mxg-text-color-black;
			text:first-child {
				margin-right: 20rpx;
			}
		}
		.shifu {
			text-align: right;
			line-height: 70rpx;
			text:last-child {
				font-size: 35rpx;
				color: $mxg-text-color-red;
			}
		}
		
		.option {
			button {
				font-size: 20rpx;
				margin-left: 10rpx;
			}
			.red {
				color: $mxg-text-color-red;
			}
			.grey {
				color: $mxg-text-color-grey;
			}
		}
	}
	
	.bottom-ios{
		z-index: 100;
		position: fixed;
		left: 0;
		right: 0;
		bottom: 0;
		background-color: #fff;
		padding: 30rpx 40rpx;
		border-top: underline;
		
		.title{
			font-size: 38rpx;
		}
	}
</style>